// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

// 导入vuex
import Vuex from 'vuex'

Vue.use(Vuex)

Vue.config.productionTip = false

var store = new Vuex.Store({
  state: {
    count: 2
  },
  mutations: {
    //如果要操作store中的state值，只能通过调用mutations提供的方法，才能操作对应操作的数据，不推荐直接操作。万一导致数据的紊乱不能快递定位到错误原因
    // 数据加一
    incerment(state) {
      state.count++
    },
    // 数据减少  传第二个位置开始传，少去 number的值
    subtract(state, number) {
      state.count -= number
    },
    cc(state, obj) {
      //测试传参。mutations里面的方法，只能传2个参数，一个上固定死的，上面的state，
      //另外一个是可以传递的 通过 commit提交过来的参数，这个参数可以是一个对象 或者数组。最多只能有2个
      //eg:  this.$store.commit('cc',{c:1,b:2})
      console.log(obj)
      state.count -= (obj.c) - (obj.b)
    },
    add(state,number) {
      state.count+=number;
    }
  },
  getters: {
    //注意这里的getters 只负责对外提供数据，不负责修改数据，如果要修改 state 数据请去mutations
    optCount: function (state) {
      return '当前最新的count值是:' + state.count
    }
    //经过咱们回顾对比，发现getters中的方法，和组件中的过滤器比较类似，因为过滤器和getters都没有修改原数据，都是把原数据做了一层包装，提供给了调用者。
    //其次getters 也和computed比较像。只要state中的数据发生了变化。那么，如果getters正好也引用了这个数据，就会立即触发getters的重新赋值。
  },
  actions: {
    newAdd(context,number) {
      context.commit('add',number);
    }
  }
})


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store
})
